<template>
  <div class="filter-setting-container">
    <div :style="{ borderTop: filterFields.length > 4 ? '1px solid #EBEEFD': 'none'}" class="filter-setting-item-list">
      <template v-for="(item) in filterFields" >
        <div
          :key="item.key"
          :style="{ borderTop: filterFields.length > 4 ? 'none' : '1px solid #EBEEFD'}"
          class="filter-setting-item">
          <div class="check"><el-checkbox v-model="item.isFilter" @change="updateComponent" @click.native="emitClickEvent" /></div>
          <div :style="{'fontWeight': item.isFilter ? 'bold' : ''}" class="field-content">
            <ToolTip :content="item.subformFullName || item.name" />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  model: {
    prop: 'fields',
    event: 'change'
  },
  props: {
    fields: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    };
  },
  computed: {
    filterFields: {
      get() {
        return this.fields;
      },
      set(list) {
        this.$emit('change', list);
      }
    }
  },
  methods: {
    updateComponent() {
      this.$emit('updateComponent', this.getSelectNum());
      this.$forceUpdate();
    },
    getSelectNum() {
      return this.filterFields.filter(field => field.isFilter).length;
    },
    emitClickEvent() {
      this.$emit('checkboxChange');
    }
  }
};
</script>

<style scoped lang="scss">
.filter-setting-container {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 500px;
  padding: 12px 0;
  .filter-setting-item-list {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #EBEEFD;
    border-left: 1px solid #EBEEFD;
    width: 640px;
    .filter-setting-item {
      position: relative;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #EBEEFD;
      border-right: 1px solid #EBEEFD;
      width: 25%;
      height: 47px;
      padding: 0 17px;
      background-color: #fff;
      overflow: hidden;
      .check {
        margin-right: 8px;
      }
      .field-content {
        display: flex;
        overflow: hidden;
        align-items: center;
        flex: 1;
        font-size:14px;
        color: rgba(20,28,61,1);
        line-height: 1.2;
      }
      &:hover {
        background-color: #FAFAFA;
      }
    }
  }
}
</style>
